<template>
<div>
   <!-- 置顶栏S -->
   <div class="RoomMesgTop">
        <van-nav-bar title="发布房源">
          <template #left>
            <van-icon name="arrow-left" @click="replace"/>
          </template>
        </van-nav-bar>
      </div>
   <!-- 置顶栏E -->
      <div class="ContentBox">
        <van-cell-group>
        <van-cell title="房源信息" />
        <van-cell title="小区名称" is-link :value="aeraTxt" @click="$router.push('/rent/search')"/>
          <van-field v-model="ReleaseHouseRes.price" placeholder="请输入租金/月" type="number" :border="false" label-width="60px">
            <template #label >
              <div class="t">
            <span>租</span>
            <span>金</span>
          </div>
          </template>
          <template #extra>
            <span>￥/月</span>
          </template>
          </van-field>
          <van-field v-model="ReleaseHouseRes.size" placeholder="请输入建筑面积" type="number" label="建筑面积" :border="false" label-width="60px">
            <template #extra>
            <span>㎡</span>
          </template>
          </van-field>
        <van-cell  is-link :value="HX" @click="PublishSelection(1)">
          <template #title >
              <div class="h">
            <span>户</span>
            <span>型</span>
          </div>
          </template>
        </van-cell>
        <van-cell title="所在楼层" is-link :value="LC" @click="PublishSelection(2)"/>
        <van-cell  is-link :value="CX" @click="PublishSelection(3)">
          <template #title >
              <div class="h">
            <span>朝</span>
            <span>向</span>
          </div>
          </template>
          <template #label >
            <div class="fangwu">房屋标题</div>
          </template>
        </van-cell>
        <div class="field">
        <van-field v-model="ReleaseHouseRes.title" type="textarea" placeholder="请输入标题（例如：整粗小区名2室5000元）" autosize label-width="0px">
          <template #label >
              <div class="f">
                <div>房屋图像</div>
          </div>
          </template>
        </van-field>
        <div class="FileUp">
        <van-uploader :after-read="afterRead" v-model="fileList" multiple  preview-size="80px" upload-icon="plus"
        >
        </van-uploader>
        <div class="hous">房屋配置</div>
      </div>
      </div>
      </van-cell-group>
      <div class="BigBox">
      <div class="LitBox" v-for="(item,index) in supporting" :key="index" @click="Configure(item, index, $event)">
        <div :class="item.class"></div>
        <div>{{item.label}}</div>
      </div>
    </div>
      <!-- 分隔符 -->
      <div class="Separator">
          <van-divider :style="{ borderColor: '#f6f5f6' }"/>
      </div>
      <van-cell title="房屋描述"/>
      <van-field
        v-model="ReleaseHouseRes.description"
        rows="1"
        :style="{ height: '150px'}"
        type="textarea"
        placeholder="请输入房屋描述信息"
      />
      <!-- 分隔符 -->
      <div class="Separator">
          <van-divider :style="{ borderColor: '#f6f5f6' }"/>
      </div>
      <div class="BtouBtn">
        <van-button type="default" :style="{color:'#21b97a'}" @click="Cancel">取消</van-button>
        <van-button type="primary" @click="Submit">提交</van-button>
    </div>
      </div>
      <van-popup v-model="showH" position="bottom" :style="{ height: '45%'}">
        <van-picker
        show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
        />
      </van-popup>
</div>
</template>

<script>
import { HouseReleaseRequest, UploadImgRequest, SubmitRequest } from '@/api'
export default {
  name: 'Add',
  data () {
    return {
      HX: '请选择',
      LC: '请选择',
      CX: '请选择',
      aeraTxt: '请输入小区名称',
      fileList: [
      ],
      // 弹出层
      showH: false,
      // 弹出层内容
      columns: [],
      // 发布数据
      ReleaseList: [],
      // 仓库
      Warehouse: 0,
      // 房间特点
      supporting: [],
      // 发布数据
      ReleaseHouseRes: {
        // 标题a
        title: '',
        // 描述a
        description: '',
        // 图片a
        houseImg: [],
        // 朝向a
        oriented: '',
        // 房屋的配置，冰箱，衣柜a
        supporting: '',
        // 价格a
        price: '',
        // 户型a
        roomType: '',
        // 面积a
        size: '',
        // 楼层a
        floor: '',
        // 该房屋地址a
        community: '',
        tempSlides: []
      },
      // 提交提示框
      SubmitPop: {
        title: '提示',
        message: '房源发布成功',
        confirmButtonText: '继续发布',
        cancelButtonText: '去查看',
        canurl: '/layout/findroom',
        reload: true
      }
    }
  },
  created () {
    this.$store.state.showMe = false
    this.PublishSelection(null)
    // eslint-disable-next-line no-useless-return
    // 小区名称
    this.aeraTxt = !this.$route.params.item ? '请输入小区名称' : this.$route.params.item.communityName
    // 将选择的小区地址ID存到ReleaseHouseRes
    this.ReleaseHouseRes.community = !this.$route.params.item ? '' : this.$route.params.item.community
  },
  methods: {
    async afterRead (file) {
      // 图片数据
      this.ReleaseHouseRes.tempSlides.push(file)
      // 上传图片接口，需要的参数图片对象
      const res = await UploadImgRequest(file.file)
      // 返回位于后端服务器的地址
      this.ReleaseHouseRes.houseImg.push(res.data.body)
    },
    async PublishSelection (num) {
      // 房屋发布需要的数据，请求
      try {
        const res = await HouseReleaseRequest()
        // 添加图标类名
        for (let i = 0; i < res.data.body.supporting.length; i++) {
          res.data.body.supporting[i].class = this.$store.state.HouseIcon[i].class
        }
        this.supporting = res.data.body.supporting
        console.log(this.supporting)
        this.Warehouse = num
        this.showH = Boolean(num)
        // 判断弹出内容显示
        if (num === 1) {
          this.columns = res.data.body.roomType.map(item => item.label)
          this.ReleaseList = res.data.body.roomType
        }
        if (num === 2) {
          this.columns = res.data.body.floor.map(item => item.label)
          this.ReleaseList = res.data.body.floor
        }
        if (num === 3) {
          this.columns = res.data.body.oriented.map(item => item.label)
          this.ReleaseList = res.data.body.oriented
        }
      } catch (err) {
        // console.log(err)
      }
    },
    // 弹出层确定
    onConfirm (value, index) {
      this.showH = false
      if (this.Warehouse === 1) {
        this.HX = value
        this.ReleaseHouseRes.roomType = this.ReleaseList[index].value
      }
      if (this.Warehouse === 2) {
        this.LC = value
        this.ReleaseHouseRes.floor = this.ReleaseList[index].value
      }
      if (this.Warehouse === 3) {
        this.CX = value
        this.ReleaseHouseRes.oriented = this.ReleaseList[index].value
      }
    },
    // 弹出层取消
    onCancel () {
      this.showH = false
    },
    // 宫格选择
    Configure (item, index, e) {
      if (!this.supporting[index].check) {
        this.supporting[index].check = true
        e.target.parentNode.children[0].classList.add('active')
      } else {
        this.supporting[index].check = false
        e.target.parentNode.children[0].classList.remove('active')
      }
      this.ReleaseHouseRes.supporting = this.supporting.filter(item => item.check === true).map(item => item.label).join('|')
      console.log(this.ReleaseHouseRes)
    },
    // 底部提交按钮
    async Submit () {
      // 判断是否有图片
      for (const k in this.ReleaseHouseRes) {
        if (!this.ReleaseHouseRes[k].length) {
          this.$toast('请将内容补全')
          return
        }
      }
      this.ReleaseHouseRes.houseImg = this.ReleaseHouseRes.houseImg.join('|')
      try {
        await SubmitRequest(this.ReleaseHouseRes)
        this.$store.commit('dialog', this.SubmitPop)
      } catch (err) {
        console.log('错误异常')
      }
    },
    // 底部取消按钮
    Cancel () {
      this.$dialog.confirm({
        title: '提示',
        message: '放弃发布房源吗？',
        cancelButtonText: '放弃',
        confirmButtonText: '继续编辑'
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
          this.$router.replace('/layout')
        })
    },
    // 回退键
    replace () {
      this.$router.replace('/layout')
      this.$store.state.showMe = true
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #21b97a;
  /deep/ .van-icon {
    color: #fff;
  }
  /deep/ .van-nav-bar__title {
    color: #fff;
  }
}
.t{
  display: flex;
  justify-content: space-between;
}
.h{
  display: flex;
  justify-content: space-between;
  width: 60px;
}
.fangwu{
  // height:30px;
  padding-top:15px;
  font-size: 15px;
  color:#333;
}
.f{
  padding-top:45px;
  // padding-left:12px;
width: 60px;
}
.field{
  /deep/ .van-field__body{

  margin-left:-15px;
  }
}
.van-cell{
  border-bottom: 1px solid rgb(235, 235, 235);
}
.FileUp{
  height:140px;
  margin:10px 10px;
font-size: 15px;
.hous{
  margin-top:27px;
}
}
/deep/ .van-grid-item__content{
  text-align: center;
}
/deep/ .van-grid-item__icon-wrapper{
  transform: scale(1.6);
  margin-bottom:10px;
  }
  /deep/ .van-grid-item__text{
    font-size: 15px ;
  }
  .Separator{
    margin:-15px 0 ;
  /deep/ .van-divider {
    height: 20px;
    background-color: #f6f5f6;
  }
}
.BtouBtn{
  width: 100%;
  display: flex;
  .van-button{
    flex:1;
  }
}
/deep/ .van-cell__value{
  padding: 0 5px;
}
/deep/ .active{
  color:red !important;
}
.gridItem{
  padding-left: 3px;
width: 70px;
// height: 30px;
}
.BigBox{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-around;
  text-align: center;
  .LitBox{
    padding-top:15px;
    width:70px;
    height:60px;
    font-size: 12px;
    transform: scale(1.6);
  }
}
</style>
